/**
 * Ant Design Pro v4 use `@ant-design/pro-layout` to handle Layout.
 * You can view component api by:
 * https://github.com/ant-design/ant-design-pro-layout
 */
import React, { useEffect, useState } from 'react';
import ProLayout from '@ant-design/pro-layout';
import { Affix, ConfigProvider, Input, Result } from 'antd';
import { PageContainer, RouteContext } from '@ant-design/pro-layout';
import { Link, connect, history, } from 'umi';
import zhCN from 'antd/lib/locale/zh_CN';
import HeaderContent from '@/components/HeaderMenu';
import TopBar from '@/components/TopBar';
import { KeepAlive, useAliveController, AliveScope } from 'react-activation';
import { setString } from '@/utils/utils'
import './BasicLayout.less';
const BasicLayout = (props) => {
  const { dispatch, children, location, menuList, bottomAccessList } = props;
  const { pathname, query } = location;
  const { onlyId = '' } = query
  const { getCachingNodes } = useAliveController();
  const [id, setId] = useState(null);
  useEffect(() => {
    const { query } = location;
    const { accessId } = query;
    if (id !== accessId) {
      setId(accessId);
    }
  }, [props]);
  const findIdByUrl = (data, url) => {
    for (let i = 0; i < data.length; i++) {
      if (data[i].accessUrl === url) {
        return data[i].id;
      }
      if (data[i].subAccessList) {
        const id = findIdByUrl(data[i].subAccessList, url);
        if (id) {
          return id;
        }
      }
    }
    return null; // 如果没有找到对应的accessUrl，则返回null
  };
  useEffect(() => {
    document.querySelector('.BasicLayout_content').scrollTo(0, 0)

    // if (getCachingNodes().map(val => { return val.name }).includes(pathname) && history.action !== 'POP') {
    //   console.log(pathname, 111111111111111111111)
    //   drop(pathname)
    // }
  }, [pathname])
  const fetchCheck = (pathname, query) => {
    dispatch({
      type: 'promoter/fetchCheckPromoter',
      callback: (e) => {
        const { checkFlag } = e
        if (checkFlag !== '1') {
          dispatch({
            type: 'promoter/fakeStartPromoter',
            callback: (e) => {
              history.replace({
                pathname: pathname,
                query: {
                  ...query,
                }
              });
            }
          })
        }
        history.replace({
          pathname: pathname,
          query: {
            ...query,
          }
        });

      }
    })
  }
  useEffect(() => {
    const unblock = history.listen((location, action) => {
      if (action === 'PUSH') {
        const { pathname, query } = location;
        history.replace({
          pathname: pathname,
          query: {
            ...query,
            onlyId: setString(true, 7, 8)
          }
        });

      }
      // 返回一个字符串来显示给用户的提示信息，如果不返回任何值，则不会显示提示信息
    });

    return () => {
      unblock();
    };
  }, []);
  useEffect(() => {
    if (dispatch) {
      dispatch({
        type: 'login/fetchListLoginAdminAccess',
      });
    }
  }, []);
  // const keepLiveRouter = [
  //   '/order/orderDetails',
  //   '/marketingModule/createLive',
  //   '/marketingModule/createOnDemand',
  //   '/marketingModule/createDirectLive',
  //   '/marketingModule/createDemandVideo',
  //   '/marketingModule/createLiveClass',
  //   '/marketingModule/createFaceToFace',
  //   '/marketingModule/createSecKill',
  //   '/marketingModule/liveDetail',
  //   '/marketingModule/directLiveDetail',
  //   '/marketingModule/onDemandDetail',
  //   '/marketingModule/demandVideoDetail',
  //   '/marketingModule/liveClassDetail',
  //   '/marketingModule/faceToFaceDetail',
  //   '/commodityModule/commodityDetail'
  // ]
  return (
    <AliveScope>
      <ConfigProvider locale={zhCN}>
        <div className="BasicLayout_box">
          <HeaderContent
            accessId={id}
            menuList={menuList}
            bottomAccessList={bottomAccessList}
          ></HeaderContent>
          <div className="BasicLayout_content">
            <TopBar dispatch={dispatch}></TopBar>
            <div className="base_content">
              <KeepAlive
                when={() => {
                  // 根据路由的前进和后退状态去判断页面是否需要缓存，前进时缓存，后退时不缓存（卸载）。 when中的代码是在页面离开（卸载）时触发的。
                  return history.action != 'POP'; //true卸载时缓存，false卸载时不缓存
                }}
                cacheKey={onlyId}
                id={pathname + onlyId} // 缓存多个页面时要有id
                name={pathname} // 页面的path地址
                saveScrollPosition={false} // 可以记住页面的滚动位置,切换页面是回到上一次滚动的位置,可以设置为false
              >
                {onlyId ? children : null}
              </KeepAlive>
            </div>
          </div>
        </div>
      </ConfigProvider>
    </AliveScope>
  );


};

export default connect(({ login }) => ({
  menuList: login.accessList,
  bottomAccessList: login.bottomAccessList,
}))(BasicLayout);
